// 找到tbody
const list = document.querySelector('.list')
// 找模态框
const modal = new bootstrap.Modal(document.querySelector('#modal'))

// 当模态框完全关闭清空内容
document.querySelector('#modal').addEventListener('hidden.bs.modal', function () {
  form.reset()
})

// 获取省市区的下拉框
const provinceSel = document.querySelector('[name="province"]')
const citySel = document.querySelector('[name="city"]')
const areaSel = document.querySelector('[name="area"]')
// 获取模态框里的表单
const form = document.querySelector('#form')
// 找到模态框的标题
const modalTitle = document.querySelector('.modal-title')

// 给省加change事件
provinceSel.addEventListener('change', async function () {
  // 去加载市
  await getCity()
  // 加载区
  getArea()
})
// 给市加change事件
citySel.addEventListener('change', function () {
  // 去加载区
  getArea()
})

// 给添加按钮加点击事件
document
  .querySelector('#openModal')
  .addEventListener('click', async function () {
    // 把标题改回添加学员
    modalTitle.innerHTML = '添加学员'
    // 显示出模态框
    modal.show()
    // 获取省
    await getProvince()
    // 获取市
    await getCity()
    // 获取区
    await getArea()
  })

// 给模态框里的确认加点击事件
document.querySelector('#submit').addEventListener('click', async function () {
  // 获取界面所有内容
  const data = serialize(form, { hash: true })

  // 非空判断
  if (!data.name) {
    return tip('请输入姓名')
  }
  if (!data.age) {
    return tip('请输入年龄')
  }

  // 做数字转换
  data.age = +data.age
  data.gender = +data.gender
  data.group = +data.group
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary

  // 因为添加和修改也仅仅只是路径和请求方式不一样
  // 所以声明两个变量，根据是新增还是修改给不同的值
  let url = ''
  let method = ''
  if (modalTitle.innerHTML === '添加学员') {
    // 发添加的请求
    url = '/students',
    method = 'post'

  }else {
    // 发修改的请求
    url = `/students/${id}`
    method = 'put'
  }

  // 发请求给服务器
  await axios({
    url,
    method,
    data
  })

  // 关闭模态框
  modal.hide()
  // 重新加载数据
  getStudentList()
})

// 封装获取省的函数
async function getProvince () {
  const res = await axios({
    url: 'api/province'
  })
  provinceSel.innerHTML = res.data.map(v => `<option>${v}</option>`).join('')
}
// 封装获取市的函数
async function getCity () {
  const res = await axios({
    url: 'api/city',
    params: {
      pname: provinceSel.value
    }
  })
  citySel.innerHTML = res.data.map(v => `<option>${v}</option>`).join('')
}
// 封装获取区的函数
async function getArea () {
  const res = await axios({
    url: 'api/area',
    params: {
      pname: provinceSel.value,
      cname: citySel.value
    }
  })
  areaSel.innerHTML = res.data.map(v => `<option>${v}</option>`).join('')
}

// 给tbody加事件委托
list.addEventListener('click', async function (e) {
  if (e.target.classList.contains('bi-trash')) {
    // 有这个类代表点击的是删除
    await axios({
      url: `/students/${e.target.dataset.id}`,
      method: 'delete'
    })

    // 弹出提示
    tip('删除成功')
    // 重新渲染
    getStudentList()
  }
})

// 用全局变量把被点的id存起来
let id = null
list.addEventListener('click', async function (e) {
  // 判断是不是点击的编辑
  if (e.target.classList.contains('bi-pen')) {

    // 保存id
    id = e.target.dataset.id

    // 模态框的标题改为修改学员
    modalTitle.innerHTML = ' 修改学员'

    // 发请求获取当前学生的数据
    const res = await axios({
      url: `/students/${e.target.dataset.id}`
    })

    // 再回显到模态框的表单上
    for (const key in res.data) {
      // 这是表单元素，所以赋值是用value
      const ele = document.querySelector(`[name=${key}]`)
      if (ele) {
        ele.value = res.data[key]
      }
    }

    // 设置性别的单选框被选中
    const arr = document.querySelectorAll('[name=gender]')
    // gender本身就返回0或1，刚好就跟下标对应，所以找到对应的下标选中即可
    arr[res.data.gender].checked = true
    // document.querySelectorAll('[name=gender]')[res.data.gender].checked = true
 
    // 调用获取省市区的方法去加载省市区
    await getProvince()
    provinceSel.value = res.data.province

    await getCity()
    citySel.value = res.data.city

    await getArea()
    areaSel.value = res.data.area

    // 显示出模态框
    modal.show()
  }
})

// 获取学生列表的函数
async function getStudentList () {
  // 发请求
  const res = await axios({
    url: '/students'
  })

  // 拼接字符串渲染到tbody
  list.innerHTML = res.data
    .map(v => {
      return ` <tr>
    <td>${v.name}</td>
    <td>${v.age}</td>
    <td>${v.gender == 1 ? '女' : '男'}</td>
    <td>第${v.group}组</td>
    <td>${v.hope_salary}</td>
    <td>${v.salary}</td>
    <td>${v.province} ${v.city} ${v.area}</td>
    <td>
      <a href="javascript:;" class="text-success mr-3"><i data-id="${
        v.id
      }" class="bi bi-pen"></i></a>
      <a href="javascript:;" class="text-danger"><i data-id="${
        v.id
      }" class="bi bi-trash"></i></a>
    </td>
  </tr>`
    })
    .join('')

  // 把数组长度也就是总人数渲染出来
  document.querySelector('.total').innerHTML = res.data.length
}

getStudentList()
